<template>
  <div class="user">
    <div class="loginContent">
      <router-link to="user/login">
        <div class="loginBall" v-show="flag">
        <span>登录</span>
        </div>
      </router-link>
      <div class="userContent" v-show="isUser">
        <img class="userBall" :src="headPhoto" @click="getUser"/>
        <div class="userRight">
          <p><span>{{nickName}}</span><van-icon name="arrow" class="iconRight"/></p>
          <div>头条 <span>0</span> 关注 <span>0</span> 粉丝 <span>0</span></div>
        </div>
      </div>
    </div>
    <van-panel title="常用功能" class="commonly">
      <div class="content">
        <van-grid :column-num="4" >
          <van-grid-item
            v-for="el in iconArr1"
            :key="el.id"
            :icon="el.title"
            :text="el.content"
            :to="el.link"
          />
        </van-grid>
      </div>
      </van-panel>
      <van-panel title="更多功能" class="commonly">
      <div class="content">
        <van-grid :column-num="4" >
          <van-grid-item
            v-for="el in iconArr2"
            :key="el.id"
            :icon="el.title"
            :text="el.content"
          />
        </van-grid>
      </div>
    </van-panel>
    <Mytabbar></Mytabbar>
      <van-popup
      v-model="userShow"
      closeable
      close-icon="arrow-left"
      position="right"
      close-icon-position="top-left"
      :style="{ width: '100%',height:'100%' }">
      <div class="userBox">
        <div class="userTop">
          <img class="userPhone" :src="headPhoto"/>
          <div class="userRight">
            <p><span>{{nickName}}</span></p>
            <div><span @click="updateMeg">编辑资料</span><span class="last-span" @click="quitLogin">退出登录</span></div>
          </div>
        </div>
        <div class="userMain">
          <span>TA还没有发布内容哦~</span>
        </div>
      </div>
      </van-popup>
      <van-popup
      v-model="update"
      closeable
      close-icon="arrow-left"
      position="right"
      close-icon-position="top-left"
      :style="{ width: '100%',height:'100%' }">
      <div class="upTop"><span>编辑资料</span></div>
      <div class="upMain">
        <div class="upMain-top">
          <p>
            <input type="file" name="image" accept="image/*" @change='rePhoto'
            class="header-upload-btn user-header-com">
            <span>头像</span>
            <span class="photo">
              <img :src='imgStr' class="user-header-img user-header-com">
              <van-icon name="arrow" />
              </span>
            </p>
          <p @click="reName"><span>用户名</span><span><span class="nicknameMsg">{{nickName}}</span><van-icon name="arrow" /></span></p>
          <p class="last-p"><span>修改密码</span><span><van-icon name="arrow" /></span></p>
        </div>
        <div class="upMain-main">
          <p><span>性别</span><span><span class="spantext">待完善</span><van-icon name="arrow" /></span></p>
          <p><span>生日</span><span><span class="spantext">待完善</span><van-icon name="arrow" /></span></p>
          <p class="last-p"><span>地区</span><span><span class="spantext">待完善</span><van-icon name="arrow" /></span></p>
        </div>
        <div class="upMain-bottom">
          <p @click="getOk">完成</p>
        </div>
      </div>
      <van-popup
      v-model="rename"
      position="bottom"
      :style="{ width: '100%',height:'60%' }">
      <div class="renamebox">
        <span @click="getuot">完成</span>
        <input type="text" :placeholder="nickName" v-model="getreName">
      </div>
      </van-popup>
      </van-popup>
  </div>
</template>
<script>
import Mytabbar from '../../components/Mytabbar'
export default {
  data: () => ({
    iconArr1: [{ id: 1, title: 'like-o', content: '关注', link: 'user/takecare' },
      { id: 2, title: 'volume-o', content: '消息通知', link: 'user/message' },
      { id: 3, title: 'star-o', content: '收藏', link: 'user/collect' },
      { id: 4, title: 'clock-o', content: '阅读历史' },
      { id: 5, title: 'balance-pay', content: '钱包' },
      { id: 6, title: 'edit', content: '用户反馈' },
      { id: 7, title: 'bulb-o', content: '免流量服务' },
      { id: 8, title: 'setting-o', content: '系统设置' }
    ],
    iconArr2: [{ id: 1, title: 'gem-o', content: '超级会员' },
      { id: 2, title: 'flower-o', content: '圆梦公益' },
      { id: 3, title: 'brush-o', content: '清除缓存' },
      { id: 4, title: 'closed-eye', content: '夜间模式' },
      { id: 5, title: 'comment-o', content: '评论' },
      { id: 6, title: 'good-job-o', content: '点赞' },
      { id: 7, title: 'scan', content: '扫一扫' },
      { id: 8, title: 'upgrade', content: '广告推广' }
    ],
    users: JSON.parse(localStorage.getItem('users') || '[]'),
    flag: true,
    isUser: false,
    userShow: false,
    id: '',
    update: false,
    headPhoto: '',
    nickName: '',
    phoneUrl: '',
    imgStr: '',
    dataURL: '',
    rename: false,
    getreName: ''
  }),
  created () {
    this.users.some(el => {
      if (this.users.length > 0) {
        this.flag = false
        this.isUser = true
        // eslint-disable-next-line camelcase
        const { headimg, u_name } = this.users[0]
        this.id = el.u_id
        this.headPhoto = headimg
        // eslint-disable-next-line camelcase
        this.nickName = u_name
        this.imgStr = this.headPhoto
      } else {
        this.flag = true
        this.isUser = false
      }
    })
  },
  methods: {
    getUser () {
      this.userShow = true
    },
    quitLogin () {
      localStorage.removeItem('users')
      this.$toast.success('退出成功')
      setTimeout(function () {
        history.go(0)
      }, 1500)
    },
    updateMeg () {
      this.update = true
    },
    rePhoto (e) {
      this.phoneUrl = e.target.files[0]
      let imgSize = this.phoneUrl.size
      var _this = this
      if (imgSize <= 1000 * 1024) {
        var reader = new FileReader()
        reader.readAsDataURL(this.phoneUrl)
        reader.onloadend = function () {
          this.dataURL = reader.result
          _this.imgStr = this.dataURL
        }
      } else {
        this.$toast('图片大小不超过1M')
      }
    },
    reName () {
      this.rename = true
    },
    getuot () {
      this.rename = false
      if (this.getreName === '') {
        this.nickName = this.nickName
      } else {
        this.nickName = this.getreName
      }
    },
    getOk () {
      var formdata = new FormData()
      formdata.set('id', this.id)
      formdata.set('phoneUrl', this.phoneUrl)
      formdata.set('nickname', this.nickName)
      this.users.some((el) => {
        if (this.nickName === el.u_name && this.phoneUrl === '') {
          return false
        } else {
          this.$http.post('/api/updateheadimg', formdata).then((res) => {
            const { data: { status, message, data } } = res
            // eslint-disable-next-line camelcase
            if (status !== 0) return this.$toast.fail('修改失败')
            this.$toast.success(message)
            localStorage.removeItem('users')
            localStorage.setItem('users', JSON.stringify(data))
            setTimeout(function () {
              history.go(0)
            }, 1500)
          })
        }
      })
    }
  },
  components: {
    Mytabbar
  }
}
</script>
<style lang="less" scoped>
.user{
  .loginContent{
    padding-top:46px;
    height: 120px;
    border-bottom: 6px solid #fafafa;
    .loginBall{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: #E5645F;
      margin: 0 auto;
      span{
        display: block;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #ffffff;
        font-weight: bold
      }
    }
    .userContent{
      width: 80%;
      margin-left: 25px;
      display: flex;
      .userBall{
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin-top:10px;
      }
      .userRight{
        margin-left: 20px;
        margin-top:5px;
        p{
          display: flex;
          align-items: center;
          .iconRight{
            font-size: 12px;
            padding-left: 20px;
            margin-top:5px;
          }
        }
        div{
          font-size: 12px;
          span{
            padding-right: 3px;
          }
        }
      }
    }
  }
  .commonly{
    color: #000000;
    border-bottom: 6px solid #fafafa;
    font-weight: bold;
    .content{
      font-size: 14px;
      font-weight: normal;
    }
  }
  .userBox{
    .userTop{
      width: 100%;
      height: 150px;
      display: flex;
      align-items: center;
      .userPhone{
        width: 60px;
        height: 60px;
        background: pink;
        border-radius: 50%;
        margin-left: 30px;
        margin-top: 10px;
      }
      .userRight{
        margin-left: 30px;
        p{
            margin-left: 10px;
        }
        div{
          display: flex;
          span{
            display: block;
            width: 80px;
            font-size: 13px;
            text-align: center;
            line-height: 20px;
            height: 20px;
            border-radius: 5px;
            border: 1px solid #c0c0c0;
            margin-left: 10px;
          }
          .last-span{
            background: #E5645F;
            color: #ffffff;
          }
        }
      }
    }
    .userMain{
      width: 100%;
      height: 520px;
      background: #F4F5F5;
      text-align: center;
      span{
        font-size: 12px;
        color: #c0c0c0;
        line-height: 520px;
      }
    }
  }
  .upTop{
    width: 100%;
    height: 46px;
    text-align: center;
    border-bottom: 15px solid #F4F5F6;
    span{
    width: 100%;
    height: 46px;
    line-height:46px;
    letter-spacing:2px;
    }
  }
  .upMain{
    width: 100%;
    height: 610px;
    background: #F4F5F6;
    .van-icon{
      color: #c0c0c0;
      padding-left: 10px;
    }
    p{
      margin: 0;
    }
    .upMain-top{
      width: 100%;
      height: 150px;
      background: #ffffff;
      margin-bottom: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      p{
        width: 90%;
        height: 50px;
        border-bottom: 1px solid #e9e8e8;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .header-upload-btn{
          position: absolute;
          top:100;
          opacity: 0;
          left: 55px;
        }
        .nicknameMsg{
          font-size: 13px;
          color: #9e9e9e;
        }
        .photo{
          display: flex;
          align-items: center;
          img{
            width: 28px;
            height: 28px;
            border-radius: 50%;
          }
        }
      }
      .last-p{
        border: 0px
      }
    }
    .upMain-main{
      width: 100%;
      height: 150px;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      p{
        width: 90%;
        height: 50px;
        border-bottom: 1px solid #e9e8e8;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .spantext{
          font-size: 14px;
          color: rgb(46, 177, 230)
        }
      }
      .last-p{
        border: 0px
      }
    }
    .upMain-bottom{
      width: 100%;
      position: absolute;
      bottom: 30px;
      display: flex;
      justify-content: center;
      p{
        width: 80%;
        height: 40px;
        background: #E5645F;
        border-radius: 25px;
        text-align: center;
        line-height: 40px;
        color: #ffffff;
      }
    }
  }
  .renamebox{
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    input{
      position: absolute;
      top: 80px;
      width: 70%;
      border: none;
      border-bottom: 1px solid #c0c0c0;
    }
    span{
      position: absolute;
      right: 20px;
      top: 10px;
      color: #a3a2a2;
      font-size: 14px;
    }
  }
  }
</style>
